<script setup lang="ts">
import { ref } from 'vue';

const count = ref(1)

const money = ref(1000)
</script>

<template>
  <div class="user-page">
    user

    <!-- 结论： vue3中v-model 等价 :modelValue + @update:modelValue -->
    <CpCount
      v-model="count"
    >
    </CpCount>
    <!-- 测试vue3中父传子子传父的v-model语法糖 -->
    <!-- <CpCount
      :modelValue="count"
      @update:modelValue="count=$event"
    >
    </CpCount> -->
    <!-- <CpCount
      :count="count"
      @changeCount="count=$event"
    >
    </CpCount> -->



    <!-- 结论：： vue3中v-model:xxx 等价 :xxx + @update:xxx -->
    <!-- 可以指定父传子的属性名 比较灵活 建议使用！！！ -->
    <CpCount2
      v-model:xxx="money"
    >
    </CpCount2>

    <!-- <CpCount2
      :xxx="money"
      @update:xxx="money=$event"
    >
    </CpCount2> -->

    <!-- <CpCount2
      :money="money"
      @changeMoney="money=$event"
    >
    </CpCount2> -->
  </div>
</template>

<style lang="scss" scoped></style>
